<template>
  <BasicModal v-bind="$attrs" @register="registerModal" @cancel="handleClose" title="新增模板">
    <a-form :model="formState" name="basic" layout="horizontal">
      <a-form-item label="模板类型" :labelCol="{ span: 4 }" name="templateType">
        <ApiSelect
          v-model:value="formState.templateType"
          :api="getDictTypeListApi"
          placeholder="请选择模板类型"
          :params="{
            type: 'template_type',
          }"
        />
      </a-form-item>

      <a-form-item
        label="模板文件"
        name="file"
        :labelCol="{ span: 4 }"
        :rules="[{ required: true, message: '请上传模板文件' }]"
      >
        <UploadDragger
          name="file"
          :maxCount="1"
          :fileList="formState.file"
          :beforeUpload="handleBefore"
          :multiple="false"
          @remove="handleDel"
        >
          <div class="drag-icon">
            <img :src="uploadIcon" class="upload-icon" />
            <!-- <CloudUploadOutlined class="upload-icon" /> -->
            <p class="temp upload-tip">点击或将文件拖拽到这里上传</p>
          </div>
        </UploadDragger>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button type="primary" @click="handleSubmit"> 保存 </a-button>
    </template>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue';

  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { ApiSelect } from '/@/components/Form/index';
  import { Form } from 'ant-design-vue';
  import { getDictTypeListApi } from '/@/api/admin/dict';
  import { importFlowApi } from '/@/api/flow/temp';
  import type { UploadProps } from 'ant-design-vue';
  import { Upload } from 'ant-design-vue';
  // import { useMessage } from '/@/hooks/web/useMessage';
  import uploadIcon from '/@/assets/images/upload-icon.png';
  import { useMessage } from '/@/hooks/web/useMessage';

  export default defineComponent({
    name: 'FormModal',
    components: {
      BasicModal,
      ApiSelect,
      AForm: Form,
      AFormItem: Form.Item,
      UploadDragger: Upload.Dragger,
    },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const loading = ref(true);

      const formState = reactive<{ file?: UploadProps['fileList']; templateType?: string }>({
        file: [],
        templateType: '0',
      });
      let rawData: Recordable = {};
      const [registerModal, { setModalProps, closeModal, changeLoading }] = useModalInner(
        async (data) => {
          rawData = data;
          await init();
        },
      );
      const { createMessage } = useMessage();

      async function init() {
        try {
          changeLoading(true);

          rawData;
        } catch (e) {
          throw e;
        } finally {
          setModalProps({ confirmLoading: false });
          loading.value = false;
          changeLoading(false);
        }
      }

      async function handleSubmit() {
        try {
          // const values = await validate();
          loading.value = true;
          setModalProps({ confirmLoading: true });

          if (!formState.file) return createMessage.warning('请上传模板文件');
          //@ts-ignore
          const file = formState.file[0] as File;
          await importFlowApi({
            name: 'file',
            file,
            data: {
              templateType: formState.templateType,
            },
          });
          handleClose();
          emit('success');
        } finally {
          loading.value = false;
          setModalProps({ confirmLoading: false });
        }
      }

      async function handleClose() {
        formState.file = [];
        formState.templateType = '0';
        closeModal();
      }
      const handleBefore: UploadProps['beforeUpload'] = (_, FileList) => {
        formState.file = FileList;

        return false;
      };
      async function handleDel(file) {
        if (formState.file) {
          const idx = formState.file.findIndex((f) => f.uid === file.uid);
          if (idx > -1) {
            formState.file?.splice(idx, 1);
            return true;
          }
        }
      }
      return {
        loading,
        formState,
        registerModal,
        handleSubmit,
        handleClose,
        getDictTypeListApi,
        handleBefore,
        handleDel,
        uploadIcon,
      };
    },
  });
</script>

<style lang="less">
  .upload-icon {
    margin: 0 auto 12px auto;
    // font-size: 8em;
    // width: 112px;
    // color: @primary-color;
  }
</style>
